<template>
  <div class="header">
    <div class="logo">
      <el-icon class="mr-5" size="30px"><ElemeFilled /></el-icon>
      {{ '商城后台管理系统' }}
    </div>
    <div>
      <!-- 展开图标 -->
      <el-tooltip effect="dark" content="展开" placement="bottom">
        <el-icon
          class="icon-btn"
          size="20px"
          @click="$store.commit('SET_ASIDEWIDTH')"
        >
          <Expand v-if="$store.state.asideWidth == '250px'" />
          <Fold v-else />
        </el-icon>
      </el-tooltip>
      <el-tooltip effect="dark" content="刷新" placement="bottom">
        <!-- 刷新图标 -->
        <el-icon class="icon-btn" size="20px" @click="handleRefresh">
          <Refresh />
        </el-icon>
      </el-tooltip>
    </div>
    <div class="right-header">
      <el-tooltip effect="dark" content="全屏" placement="bottom">
        <!-- 全屏图标 -->
        <el-icon class="icon-btn" size="20px" @click="toggle">
          <FullScreen v-if="isFullscreen == false" /><Aim v-else />
        </el-icon>
      </el-tooltip>
      <!-- 下拉菜单 -->
      <el-dropdown class="dropdown" placement="bottom-end">
        <span class="text-light-300 flex items-center">
          <el-avatar :size="35" :src="$store.state.user.avatar" class="mr-3" />
          {{ '用户名' }}
          <el-icon class="el-icon--right"><arrow-down /></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <!-- <el-dropdown-item @click="drawer = true">修改密码</el-dropdown-item> -->
            <el-dropdown-item @click="resetPassword">修改密码</el-dropdown-item>
            <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
  <!-- 抽屉 -->
  <!-- <el-drawer
    style="height: 100%"
    direction="ttb"
    v-model="drawer"
    title="修改密码"
    :with-header="true"
    :before-close="handleOut"
    size="45%"
  >
    <div class="flex justify-center">
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="auto"
        class="w-[300px]"
      >
        <el-form-item prop="oldpassword" label="旧密码：">
          <el-input v-model="form.oldpassword" placeholder="请输入旧密码" />
        </el-form-item>
        <el-form-item prop="password" label="新密码：">
          <el-input
            v-model="form.password"
            placeholder="请输入新密码"
            type="password"
          />
        </el-form-item>
        <el-form-item prop="repassword" label="确认密码：">
          <el-input
            v-model="form.repassword"
            placeholder="请再次确认密码"
            type="password"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" :loading="loading"
            >提 交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </el-drawer> -->
  <form-drawer
    ref="FormDrawerREF"
    @submit="onSubmit"
    title="修改密码"
    destroyOnClose
  >
    <div class="flex justify-center">
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="auto"
        class="w-[300px]"
      >
        <el-form-item prop="oldpassword" label="旧密码：">
          <el-input v-model="form.oldpassword" placeholder="请输入旧密码" />
        </el-form-item>
        <el-form-item prop="password" label="新密码：">
          <el-input
            v-model="form.password"
            placeholder="请输入新密码"
            type="password"
          />
        </el-form-item>
        <el-form-item prop="repassword" label="确认密码：">
          <el-input
            v-model="form.repassword"
            placeholder="请再次确认密码"
            type="password"
          />
        </el-form-item>
        <!-- 提交按钮已经封装到了FormDrawer.vue -->
        <!-- <el-form-item>
          <el-button type="primary" @click="onSubmit" :loading="loading"
            >提 交
          </el-button>
        </el-form-item> -->
      </el-form>
    </div>
  </form-drawer>
</template>

<script setup>
import { useResetPassword, useLogout } from '@/composables/useManager'
import FormDrawer from '@/components/FormDrawer.vue'
// import { useRouter } from 'vue-router'
// import { useStore } from 'vuex'
// import { dialog, toast } from '@/composables/util'
// import { ref, reactive } from 'vue'
// import { logout, updatepassword } from '@/api/manager'
import { useFullscreen } from '@vueuse/core'

// const router = useRouter()
// const store = useStore()
const { isFullscreen, toggle } = useFullscreen()
const { resetPassword, FormDrawerREF, formRef, form, rules, onSubmit } =
  useResetPassword()
const { handleLogout } = useLogout()

// // 修改密码-->已经封装到useManager.js中
// const FormDrawerREF = ref(null) //通过绑定ref来获取子组件
// const resetPassword = () => {
//   FormDrawerREF.value.open()
// }
// const formRef = ref(null)
// // const drawer = ref(false)
// const form = reactive({
//   oldpassword: '',
//   password: '',
//   repassword: ''
// })
// // 表单验证
// // const loading = ref(false) // 按钮加载已封装到FormDrawer.vue
// const passwordRules = [
//   {
//     required: true,
//     message: '请输入新密码',
//     trigger: 'blur'
//   }
// ]
// const rules = {
//   oldpassword: [
//     {
//       required: true,
//       message: '请输入旧密码',
//       trigger: 'blur'
//     }
//   ],
//   password: passwordRules,
//   repassword: passwordRules
// }
// // 表单提交
// const onSubmit = () => {
//   formRef.value.validate(valid => {
//     if (!valid) {
//       toast('修改失败', '请按要求填写', 'error')
//     } else {
//       // loading.value = true // 按钮加载已封装到FormDrawer.vue
//       FormDrawerREF.value.showLoading()
//       updatepassword(form)
//         .then(res => {
//           toast('修改成功', '修改成功，请重新登录！', 'success')
//           // 删除token
//           store.dispatch('USER_LOGOUT')
//           // 跳转回登录页面
//           router.push('/login')
//         })
//         .finally(() => {
//           // loading.value = false  // 按钮加载已封装到FormDrawer.vue
//           FormDrawerREF.value.hideLoading()
//         })
//     }
//   })
// }

// // 退出登录-->已经封装到useManager.js中
// const handleLogout = () => {
//   dialog('是否退出登录?', '提示', 'warning').then(() => {
//     // 调用退出登录接口
//     // logout().finally(() => {
//     store.dispatch('USER_LOGOUT')
//     // 跳转回登录页
//     router.push('/login')
//     // 提示退出登录
//     toast('退出登录', '退出登录成功', 'success')
//     // })
//   })
// }

// 刷新
const handleRefresh = () => {
  location.reload()
}
// 退出抽屉弹框-->已经封装到FormDrawer.vue中
// const handleOut = done => {
//   dialog('确认要退出吗?', '提示', 'warning').then(() => {
//     done()
//   })
// }
</script>

<style lang="scss" scoped>
// ::v-deep .el-drawer__header {
//   padding-bottom: 100px !important;
// }

.header {
  @apply bg-[#D7AE46] text-light-300 h-[60px] flex items-center fixed top-0 left-0 right-0 z-10;
  .logo {
    @apply ml-[60px] mr-[30px] font-thin text-[20px] flex items-center justify-center;
  }
  .icon-btn {
    @apply cursor-pointer;
    width: 60px;
    height: 60px;
  }
  .icon-btn:hover {
    @apply bg-[#DDD0AE];
  }
  .right-header {
    @apply flex items-center ml-auto;
    .dropdown {
      @apply ml-[30px] mr-[30px];
    }
    .dropdown:hover {
      @apply bg-[#DDD0AE];
      height: 60px;
    }
  }
}
</style>
